<template>
	<view class="tui-center">
		<uni-nav-bar fixed left-icon="back" title="在线解答" @clickLeft="clickLeft()"></uni-nav-bar>
		<!-- 空盒子用来防止消息过少时 拉起键盘会遮盖消息 -->
		<view  :animation="anData"  style="height:0;"></view>
		<!-- 消息体 -->
		<scroll-view scroll-with-animation scroll-y="true"  @touchmove="hideKey"
		style="width: 750rpx;" :style="{'height':srcollHeight}" :scroll-top="go" >
			<!-- 用来获取消息体高度 -->
			<view id="okk" scroll-with-animation >
			<!-- 消息 -->
				<view  class="flex-column-start" v-for="(x,i) in msgList" :key="i">
					<!-- 用户消息 头像可选加入-->
					<view v-if="x.my" class="flex justify-end padding-right one-show align-start  padding-top" >
						<view class="flex justify-end"  style="width: 400rpx;">
							<view class="margin-left padding-chat bg-cyan" style="border-radius: 35rpx;">
								<text style="word-break: break-all;">{{x.msg}}</text>
							</view>
						</view>
						<image class="chat-img margin-left" src="/static/image/icon/y8.jpg" mode="aspectFill" ></image>
					</view>
					<!-- 机器人消息 -->
					<view v-if="!x.my" class="flex-row-start margin-left margin-top one-show" >
						<view class="chat-img flex-row-center">
							<image style="height: 75rpx;width: 75rpx;" src="/static/image/icon/kefu.png" mode="aspectFit"></image>
						</view>
						<view  class="flex"  style="width: 500rpx;">
							<view class="margin-left padding-chat flex-column-start" style="border-radius: 35rpx;background-color: #fff;">
								<text  style="word-break: break-all;" >{{x.msg}}</text>
								<!-- 消息模板 =>初次问候 -->
								<view class="flex-column-start" v-if="x.type==1">
									<text class="tui-tool-text">你可以这样问我:</text>
									<text  class="mg-t-bg" @click="answer(item)" v-for="(item,index) in x.questionList" :key="index" >{{item}}</text>
									<view class="flex-row-start  padding-top-sm">
										<text class="my-neirong-sm">没有你要的答案?</text>
										<text class="padding-left" style="color: #007AFF;">换一批</text>
									</view>
								</view>
								<!-- 消息模板 =>多个答案 -->
								<view class="flex-column-start" v-if="x.type==2">
									<text class="tui-tool-text">猜你想问:</text>
									<!-- 连接服务器应该用item.id -->
									<text class="mg-t-bg" @click="answer(item)" v-for="(item,index) in x.questionList" :key="index" >{{item}}</text>
								</view>
								<!-- 消息模板 => 无法回答-->
								<view class="flex-column-start" v-if="x.type==0">
									<text class="padding-top-sm" style="color: #2fa39b;" @tap="navTo('/pagesA/opinion/opinion')">提交意见与反馈</text>
									<text class="tui-tool-text">下面是一些常见问题,您可以点击对应的文字快速获取答案:</text>
									<text class="mg-t-bg" @click="answer(item)" v-for="(item,index) in x.questionList" :key="index" >{{item}}</text>
									<view class="flex-row-start  padding-top-sm">
										<text class="my-neirong-sm">没有你要的答案?</text>
										<text class="padding-left" style="color: #1396c5;">换一批</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
				<!-- loading是显示 -->
				<view v-show="msgLoad" class="flex-row-start margin-left margin-top">
					<view class="chat-img flex-row-center">
						<image style="height: 75rpx;width: 75rpx;" src="../../static/image/tabBar/card@2.png" mode="aspectFit"></image>
					</view>
					<view  class="flex"  style="width: 500rpx;">
						<view class="margin-left padding-chat flex-column-start" 
						style="border-radius: 35rpx;background-color: #fff;">
							<uni-icons class="cuIcon-loading turn-load" type="spinner-cycle" size="44" color="#3e9982;"></uni-icons>
						</view>
					</view>
				</view>
				<!-- 防止消息底部被遮 -->
				<view style="height: 120rpx;"></view>
			</view>
		</scroll-view>

		<!-- 底部导航栏 -->
		<view class="flex-column-center" :animation="animationData" >		
			<view class="bottom-dh-char flex-row-around" style="font-size: 55rpx;">
				<!-- vue无法使用软键盘"发送" -->
				 <input  v-model="msg"  class="dh-input" type="text" @confirm="sendMsg" confirm-type="search" placeholder-class="my-neirong-sm"
				 placeholder="用一句简短的话描述您的问题" /> 
				 <view @click="sendMsg" class="cu-tag bg-cyan round">
				 	发送
				 </view>
				 <uni-icons v-if="!showTow" @click="ckAdd" type="plus-filled" size="52" color="#a5673f"></uni-icons>
				<uni-icons v-else @click="ckAdd" type="arrowdown" size="48" color="#999"></uni-icons>
			</view>
			<!-- 附加栏(自定义) -->
			<view class="box-normal flex-row-around flex-wrap">
				<view class="tb-text" @tap="navTo('/pagesA/opinion/opinion')">
					<view class="cuIcon-form">
						<uni-icons type="list" size="48" color="#666"></uni-icons>
					</view>
					<text >问题反馈</text>
				</view>
				<view class="tb-text">
					<view class="cuIcon-form">
						<uni-icons type="phone" size="48" color="#666"></uni-icons>
					</view>
					<text>人工客服</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	
	// rpx和px的比率
	var l
	// 可用窗口高度
	var wh
	// 顶部空盒子的高度
	var mgUpHeight
	
	export default {
		components:{
			uniIcons
		},
		data() {
			return {
				msgLoad:false,
				anData:{},
				animationData:{},
				showTow:false,
				msgList:[{my:false,msg:"你好我是客服机器人娜娜,请问有什么问题可以帮助您?",
				type:1,questionList:["如何注销用户","我想了解业务流程","手机号如何更换"]}],
				msg:"",
				go:0,
				srcollHeight:0
			}
		},
		onLoad(){
			uni.onKeyboardHeightChange(res => {
				const query = uni.createSelectorQuery()
				query.select('#okk').boundingClientRect(data => {
					var up=res.height*2-data.height-l*110
					console.log(up)
					if(up>0){
						// 动态改变空盒子高度
						this.msgMove(up,300)
						mgUpHeight=up
					}
					// 收回
					if(res.height==0){
						this.msgMove(0,0)
					}
				}).exec();
			 })
			var query=uni.getSystemInfoSync()
			l=query.screenWidth/750
			wh=query.windowHeight
			this.srcollHeight=query.windowHeight+"px"
            // this.srcollHeight = 1600 + 'rpx'
			console.log(wh)
		},
		methods: {
			// 切换输入法时移动输入框(按照官方的上推页面的原理应该会自动适应不同的键盘高度-->官方bug)
			goPag(kh){
				this.upTowmn(0,250)
				if(this.keyHeight!=0){
					if(kh-this.keyHeight>0){
						this.upTowmn(this.keyHeight-kh,250)
					}
				}
			},
			// 移动顶部的空盒子
			msgMove(x,t){
				var animation = uni.createAnimation({
					duration: t,
					timingFunction: 'linear',
				})
				this.animation = animation
				animation.height(x).step()
				this.anData = animation.export()
			},
			// 保持消息体可见
			msgGo(){
				const query = uni.createSelectorQuery()
				// 延时100ms保证是最新的高度
				setTimeout(()=>{
					// 获取消息体高度
					query.select('#okk').boundingClientRect(data => {
						// 如果超过scorll高度就滚动scorll
						if(data.height-wh>0){
							this.go=data.height-wh
						}
						var moveY=wh-data.height
						if(moveY-mgUpHeight<0){
							if(moveY<0){
								this.msgMove(0,200)
							}else{
								this.msgMove(moveY,200) 
							}
						}
					}).exec();
				},100)
			},
			// 回答问题的业务逻辑
			answer(item){
				// 这里应该传入问题的id,模拟就用index代替了
				this.msgList.push({"msg":item,"my":true})
				// 保证消息可见
				this.msgGo()
				this.msgKf(item)
			},
			sendMsg(){
				if(this.msg==""){
					return 0;
				}
				this.msgList.push({"msg":this.msg,"my":true})
				this.msgGo()
				this.msgKf(this.msg)
				this.msg=""
			},
			msgKf(x){				
				// loading
				this.msgLoad=true
				setTimeout(()=>{
					// 取消loading
					this.msgLoad=false
					this.msgList.push({my:false,msg:"娜娜还在学习中,没能明白您的问题,您点击下方提交反馈与问题,我们会尽快人工处理",type:0,questionList:["如何注销用户","我想了解业务流程","手机号如何更换"]})
					this.msgList.push({my:false,msg:"根据您的问题,已为您匹配了下列问题(多个答案模板)",type:2,questionList:["如何注销用户","我想了解业务流程","手机号如何更换"]})
					this.msgGo()
				},1000)
			},
			// 不建议输入框聚焦时操作此动画
			ckAdd(){
				if(!this.showTow){
					this.upTowmn(-180,350)
				}else{
					this.upTowmn(0,200)
				}
				this.showTow=!this.showTow
			},
			hideKey(){
				uni.hideKeyboard()
			},
			// 拉起/收回附加栏
			upTowmn(x,t){
				var animation = uni.createAnimation({
					duration: t,
					timingFunction: 'ease',
				})
				this.animation = animation
				animation.translateY(x).step()
				this.animationData = animation.export()
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
            clickLeft() {
                uni.navigateBack()
            }
		}
	}
</script>

<style lang="scss">
	.flex-column-start{
		display: flex;
		font-size: $uni-font-size-base;
		flex-direction: column;
		justify-content: center;
	}
	.flex-row-start{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.margin-left {
	    margin-left: $uni-spacing-row-sm;
	}
	.flex {
		display: flex;
	}
	.justify-end {
		-webkit-box-pack: end;
		justify-content: flex-end;
	}
	.margin-top {
	    margin-top: $uni-spacing-row-sm;
	}
	.padding-top-sm {
	    padding-top: $uni-spacing-row-sm;
	}
	.padding-right {
	    padding-right: $uni-spacing-row-sm;
	}
	.padding-top {
	    padding-top: 34rpx;
	}
	.flex-row-around{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	/* 转圈动画 */
	.turn-load{
	  animation:turnmy 1s linear infinite;
	}
	@keyframes turnmy{
	  0%{-webkit-transform:rotate(0deg);}
	  25%{-webkit-transform:rotate(90deg);}
	  50%{-webkit-transform:rotate(180deg);}
	  75%{-webkit-transform:rotate(270deg);}
	  100%{-webkit-transform:rotate(360deg);}
	}
	.one-show{
		animation: oneshow 0.8s ease 1;
	}
	@keyframes oneshow{
	  from{opacity: 0;}
	  to{opacity: 1;}
	}
	.flex-column-center{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: -360rpx;
	}
	
	.flex-row-center{
			 display: flex;
			 flex-direction: row;
			 justify-content: center;
			 align-items: center;
	}
	.align-start {
		-webkit-box-align: start;
		align-items: flex-start;
	}
.bottom-dh-char{
	background-color: $uni-bg-color;
	width: 750rpx;
	height: 110rpx;
}
.center-box{
	width: 720rpx;
	padding-left: 25rpx;
}
.hui-box{
	width: 750rpx;
	height: 100%;
}
.dh-input{
	width: 500rpx;
	height: 65rpx;
	font-size: 30rpx;
	border-radius: 30rpx;
	padding-left: 15rpx;
	background-color: #f0f0f0;
}
.box-normal{
	width: 750rpx;
	height: 360rpx;
	background-color: $uni-bg-color;
}
.tb-text view{
	font-size: 65rpx;
}
.tb-text text{
	font-size: 25rpx;
	color: #737373;
}
.chat-img{
	border-radius: $uni-border-radius-circle;
	width: 100rpx;
	height: 100rpx;
	background-color: $uni-bg-color;
}
.padding-chat{
	padding: 17rpx 20rpx;
}
.tb-nv{
	width: 50rpx;
	height: 50rpx;
}
.cu-tag {
	font-size: $uni-font-size-sm;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 10rpx 20rpx;
	font-family: Helvetica Neue, Helvetica, sans-serif;
	white-space: nowrap;
	justify-content: center;
	align-items: center;
}
.bg-cyan {
    background-color: #1cbbb4;
    color: $uni-text-color-inverse;
}
.round {
    border-radius: 50rpx;
}
.my-neirong-sm {
    font-size: 22rpx;
    color: #616161;
}
.cuIcon-form {
	text-align: center;
}
.tui-tool-text {
	color: #838383;
	font-size: $uni-font-size-sm;
	margin-top: $uni-spacing-col-base;
}
.mg-t-bg {
	margin-top: 30rpx;
	color: #2fa39b;
}
</style>
